<template> 
  <div class="outer">
    <h1>我是List</h1>
  <p>count:{{count}}</p>
   <button @click="increatmentHandle">count进行累加</button>
  <button @click="getMovieList">获取电影列表</button>
  <h1>电影排行榜</h1>
  <ul>
    <li v-for="item in movieList" :key="item.tvId">{{item.albumName}}</li>
  </ul>
 
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
    name:'List',
    computed:{
      // 计算属性写法：
      // count(){
      //   return this.$store.state.count
      // }


      // 映射写法-数组写法:
      ...mapState(['count','movieList'])

    },
    methods:{
      increatmentHandle(){
        // 使用mutation的时候必须使用store上的commit方法
        this.$store.commit('increatment')
      },
      ...mapActions(['getMovieList'])
    }
}
</script>

<style scoped>
  .outer {
    margin: 0 auto;
    width: 900px;
   
    background-color: rgb(200, 75, 121);
  }
</style>